<template>
  <BaseDialog v-model="dialogVisible" :title="$t('quote.quoteList')" width="900px" :before-close="handleClose">
    <div class="select-quote-container">
      <el-row class="header-filter four-border-blueBg">
        <el-col :span="24">
          <TextInput v-model="listParams.quotePerson" class="item" clearable
            :placeholder="g_t('travelAgency.quotePerson')" />
          <DateTimeLimit v-model="listParams.quoteStartTime" time-point-type="start"
            :time-boundary="listParams.quoteEndTime" :label="g_t('travelAgency.quoteStartTime')"
            style="margin-right: 10px;" />
          <DateTimeLimit v-model="listParams.quoteEndTime" time-point-type="end"
            :time-boundary="listParams.quoteStartTime" :label="g_t('travelAgency.quoteEndTime')"
            style="margin-right: 10px;" />
          <el-button type="primary" @click="handleQuery">{{
            $t('public.search')
            }}</el-button>
          <el-button plain @click="handleReset">{{
            $t('public.reset')
            }}</el-button>
        </el-col>
      </el-row>
      <div class="base-table-container">
        <BaseTable ref="refContentTable" v-loading="loading" :data="tableData" row-key="id">
          <TableColumn prop="name" :label="g_t('travelAgency.routeName')" :column-width="columnWidthObj.name" />
          <TableColumn prop="teamDate" :label="g_t('travelAgency.departureDate')"
            :column-width="columnWidthObj.teamDate">
            <template #default="{ row }">
              <span>{{
                row.teamDate
                ? g_dayjs(row.teamDate).format('YYYY-MM-DD HH:mm:ss')
                : '--'
                }}</span>
            </template>
          </TableColumn>
          <TableColumn prop="persons" :label="g_t('travelAgency.persons')" :column-width="columnWidthObj.persons" />
          <TableColumn prop="totalPrice" :label="g_t('travelAgency.totalPrice')"
            :column-width="columnWidthObj.totalPrice" />
          <TableColumn prop="avgPrice" :label="g_t('travelAgency.perCapitaPrice')"
            :column-width="columnWidthObj.avgPrice" />
          <TableColumn prop="quotePerson" :label="g_t('travelAgency.quotePerson')"
            :column-width="columnWidthObj.quotePerson" />
          <TableColumn prop="quoteTime" :label="g_t('travelAgency.quoteTime')" :column-width="columnWidthObj.quoteTime">
            <template #default="{ row }">
              <span>{{
                row.quoteTime
                ? g_dayjs(row.quoteTime).format('YYYY-MM-DD HH:mm:ss')
                : '--'
                }}</span>
            </template>
          </TableColumn>
          <TableColumn prop="action" fixed="right" :label="$t('public.action')" max-width="220"
            :column-width="columnWidthObj.action">
            <template #default="{ row }">
              <el-button text @click="handleSelect(row)">
                {{ $t('public.select') }}
              </el-button>
            </template>
          </TableColumn>
        </BaseTable>
      </div>
    </div>
  </BaseDialog>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  id: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue', 'select'])

const dialogVisible = computed({
  get: () => props.modelValue,
  set: val => emit('update:modelValue', val)
})

const listParams = ref({
  "routeId": '',
  "teamId": props.id || '',
  "quotePerson": "",
  "quoteStartTime": "",
  "quoteEndTime": ""
})

const refContentTable = ref(null)
const loading = ref(false)
const tableData = ref([])
const columnWidthObj = ref({})

onMounted(() => {
  getTableList()
})

const handleClose = () => {
  dialogVisible.value = false
}

const getTableList = () => {
  loading.value = true
  tableData.value = []
  g_api.travelAgency
    .apiQuoteList(listParams.value)
    .then(({ code, data }) => {
      if (code === '200' && data) {
        tableData.value = data
        useTableColumnWidth({
          refTable: refContentTable.value
        }).getTableColumnWidth(data => {
          columnWidthObj.value = data
        })
      }
    })
    .finally(() => {
      loading.value = false
    })
}

const handleQuery = () => {
  getTableList()
}

const handleReset = () => {
  Object.assign(listParams.value, {
    quotePerson: '',
    quoteStartTime: '',
    quoteEndTime: ''
  })
  handleQuery()
}

const handleSelect = (row) => {
  emit('select', row)
  dialogVisible.value = false
}
</script>

<style scoped lang="scss"></style>